<template>
  <div class="box">
    <div>
      <div>首页</div>
      <!-- ui测试 -->
      <a-button type="primary" @click="addCount">{{ count }}</a-button>
      <!-- pinia测试 -->
      <a-button type="primary" @click="number += 1">{{ number }}</a-button>
      <!-- svg测试 -->
      <div>
        <svg-icon name="common-logo" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/store'
// api测试
import { login } from '@/api/index'

const count = ref<number>(0)
const addCount = (): void => {
  count.value++
}

const store = useUserStore()
const number = computed<number>({
  get() {
    return store.number
  },
  set(value) {
    store.setNumber(value)
  },
})

const onLogin = (): void => {
  login()
}
onMounted(() => {
  onLogin()
})
</script>

<style scoped lang="less">
.box {
  width: 50vw;
  height: 50vh;
  .flex-center();
}
</style>
